<template>
  <div class="searchCollection">
    <div class="dropdowns">
      <van-dropdown-menu class="dropdown" active-color="#FE7959">
        <van-dropdown-item ref="sortRef" :title="categoryList[activeIdx]?.categoryName||'分类' " class="dropdown-tag">
          <van-tag :class="{
            checkTag:activeIdx==index
          }" @click="checkTagHandler(index,item.id)" type="primary" size="large" class="tag" v-for="(item,index) in categoryList " :key="item.categoryId">{{ item.categoryName }}</van-tag>
        </van-dropdown-item>
        <van-dropdown-item
          v-model="value1"
          :title="title1"
          :options="option1"
          @change="clickSort1"
        />
        <van-dropdown-item
          v-model="value2"
          :title="title2"
          :options="option2"
          @change="clickSort2"
        />
      </van-dropdown-menu>
    </div>

    <div class="card_content">
      <!-- 循环渲染数据 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="card_item flex"
          v-for="item in albumInfo"
          :key="item.albumInfo.id"
        >
          <img :src="item.albumInfo.cover_path" alt="" />
          <div class="card_info">
            <h3>{{ item.albumInfo.title }}</h3>
            <div class="info_center">
              {{ item.albumInfo.recommend_reason || item.albumInfo.intro }}
            </div>
            <div class="info_footer">
              <span class="QM"><i></i>{{ item.albumInfo.nickname }}</span>
              <span class="lins"><i></i>{{ item.albumInfo.tracks }}</span>
              <span class="pop"
                ><i></i> {{ (item.albumInfo.play / 10000)?.toFixed(2) }}万
              </span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive,watch } from "vue";
import searchApi from "@/apis/search";
import type { DetailModel } from "@/apis/search";
import { onMounted } from "vue";
import type { AnyObject } from "@/types/category";
import { useRoute } from "vue-router";
const $route=useRoute()
const props=defineProps(['kw'])


const activeIdx=ref(0)
const sortRef=ref()
let categoryList=ref<AnyObject[]>([])
const title1 = ref("排序方式");
const value1 = ref(0);
const value2 = ref(0);
const option1 = [
  { text: "相关度", value: 0,condition:'relation' },
  { text: "最多播放", value: 1,condition:'play' },
  { text: "最新上传", value: 2 ,condition:'recent'},
];
const title2 = ref("是否付费");
const option2 = [
  { text: "全部", value: 0,is_paid: '',paidFilter:false },
  { text: "免费", value: 1,is_paid: false,paidFilter:true },
  { text: "付费", value: 2 ,is_paid: true,paidFilter:true},
];



let data = reactive<DetailModel>({
  kw: props.kw,
  core: 'all',
  page: 1,
  rows: 20,
  condition: '',
  paidFilter: false,
  is_paid: ''
});
//分页数据
const loading=ref(false)
const finished=ref(false)
const onLoad=()=>{
  getSearchDetail(data)
}

watch($route,(nval)=>{
  data = {
    kw: nval.params.kw as string,
    core: 'all',
    page: 1,
    rows: 20,
    condition: '',
    paidFilter: false,
    is_paid: false
  }
  albumInfo.value = [];
  activeIdx.value = -1;
  getSearchDetail(data)
})
const clickSort1=(val:number)=>{

  
  data.condition=option1[val].condition
  data.page=1
  albumInfo.value=[]
  getSearchDetail(data)

}
const clickSort2=(val:number)=>{
  
  
  data.is_paid=option2[val].is_paid
  data.paidFilter=option2[val].paidFilter
  data.page=1
  albumInfo.value=[]
  getSearchDetail(data)

}
onMounted(() => {
  getSearchDetail(data);
  getCategoryList(props.kw)
});
const albumInfo = ref<AnyObject>([]);
const getSearchDetail = async (data: DetailModel) => {
  try {
    loading.value=true
    
    let result = await searchApi.reqSearchDetail(data);
    if(result.ret==0){
      loading.value=false
      if(result.data.albumViews.albums.length >0){
        if(result.data.albumViews.albums.length < data.rows){
          finished.value=true
        }
        albumInfo.value.push (...result.data.albumViews.albums) ;
        data.page++
       
      }else{
        finished.value=true
      }
    }
    
  } catch (error) {
    console.log(error);
    loading.value=false
  }
};


//专辑分页列表数据
 const  getCategoryList=async (kw:string)=>{
  try {
    let res=await searchApi.reqAll(kw)
    categoryList.value=res.data.categories

  } catch (error) {
    console.log(error);
    
  }
 }
 const checkTagHandler=(idx:number,id:number)=>{
  activeIdx.value=idx
  data.category_id=id ||''
  data.page=1
  albumInfo.value = [];
  getSearchDetail(data)
 }
</script>

<style lang="less" scoped>
.searchCollection {
  .dropdowns {
    .dropdown {
      position: relative;
      .dropdown-tag {
       
        .tag {
          color: #666;
          background-color: #f3f4f5;
          padding: 5px 15px;
          margin: 10px 10px;
        }
        .checkTag{
          color:#FE7959;
          background:#FE79591A;

        }
      }
      /deep/.van-cell__value {
        flex: 0;
      }
      /deep/.van-dropdown-item__option {
        text-align: center;
        overflow-x: hidden;
        width: 375px;
      }
      /deep/.van-overlay {
        background-color: rgba(0, 0, 0, 0.3);
      }
      /deep/.van-popup {
        border-radius: 0 0 12px 12px;
      }
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-bottom: 1px solid #ededee;
        padding-top: 10px;
      }
    }
  }
  .card_content {
    padding-left: 15px;
    .card_item {
      padding: 15px 10px 15px 0;
      border-bottom: 1px solid #e8e8e8;
      img {
        width: 70px;
        height: 70px;
        margin-right: 15px;
      }
      .card_info {
        h3 {
          font-size: 16px;
          color: rgb(51, 51, 51);
          line-height: 25px;
          margin-top: 1px;
        }
        .info_center {
          font-size: 13px;
          margin: 5px 0 7px;
          color: #999;
          // line-height: 20px;
        }
        .info_footer {
          font-size: 11px;
          line-height: 25px;
          color: #999;
          .QM {
            margin-right: 16px;
            i {
              margin-right: 3px;
              &::before {
                content: "\e606";
                font-family: "iconfont";
                margin-right: 3px;
              }
            }
          }
          .lins {
            margin-right: 16px;
            i {
              margin-right: 3px;
              &::before {
                content: "\e682";
                font-family: "iconfont";
                margin-right: 3px;
              }
            }
          }
          .pop {
            i {
              margin-right: 3px;
              &::before {
                content: "\e608";
                font-family: "iconfont";
                margin-right: 3px;
              }
            }
          }
        }
      }
    }
  }
}
.flex {
  display: flex;
}
</style>
